export const addCouplet = (editor) => {
    const {
        Components
    } = editor;
    Components.addType('couplet', {
        model: {
            defaults: {
                name: 'couplet',
                droppable: false,
                components: [{
                    type: 'div',
                    attributes: {
                        class: 'div1',
                    },
                    components: [{
                        type: 'span',
                        attributes: {
                            class: 'pic1',
                        },
                        content: '×'
                    },
                    {
                        type: 'image',
                        attributes: {
                            class: 'box1',
                            src: 'https://img2.baidu.com/it/u=3227619927,365499885&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1719766800&t=8c40999f014dee36e5222c9ceb9dcef8'
                        }
                    }
                    ],
                },
                {
                    type: 'div',
                    attributes: {
                        class: 'div2',
                    },
                    components: [{
                        type: 'span',
                        attributes: {
                            class: 'pic2',
                        },
                        content: '×'
                    },
                    {
                        type: 'image',
                        attributes: {
                            class: 'box2',
                            src: 'https://img2.baidu.com/it/u=3227619927,365499885&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1719766800&t=8c40999f014dee36e5222c9ceb9dcef8'
                        },
                        // content:'<span class="pic1"  style="display: block;position:absolute;z-index: 9999;">×</span>'
                    }]
                }],
                script() {
                    document.getElementsByClassName('pic1')[0].onclick = () => {
                        document.getElementsByClassName('div1')[0].style.display = 'none';
                    }
                    document.getElementsByClassName('pic2')[0].onclick = () => {
                        document.getElementsByClassName('div2')[0].style.display = 'none';
                    }
                },
                styles: `
            .div1{
                position: fixed;
                cursor: pointer; 
                top:120px;display: flex;
                 justify-content: right; 
                 height: 160px; width: 100px; 
                 left:5px;
            }
                 .div2{
                 position: fixed;
                 cursor: pointer;
                  top:120px;
                  display: flex; 
                 justify-content: right; 
                 height: 160px;
                  width: 100px; 
                 right:5px;
                 }
                 .pic1{
                 display: block;
                 position:absolute;
                 z-index: 9999;
                 }
                 .pic2{
                 display: block;
                 position:absolute;
                 z-index: 9999;
                 color:black;
                 }
        .box1 {
            width: 100px;
            height: 160px;
            background: red;
            position: absolute;

        }

        .box2 {
            width: 100px;
            height: 160px;
            background: red;
            position: absolute;
            /* top: 120px;
			right: 5px; */
            /* display: none; */
        }
                `,
            },

        },
    });

    // 注册 customCheckbox 组件
    editor.BlockManager.add('couplet', {
        label: '对联广告',
        category: '其他类',
        media: `<svg t="1720776543366" class="icon" viewBox="0 0 1148 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="22832" width="30" height="30"><path d="M0 0h1148.416v1024H0z" p-id="22833"></path><path d="M194.56 180.736h77.824v357.888H194.56zM896 180.736h77.824v357.888H896z" p-id="22834"></path></svg>`,
        content: {
            type: 'couplet'
        },
    });
};